|
1
|
|
|
import { Button, Card } from 'reactstrap'; |
|
2
|
|
|
import React from 'react'; |
|
3
|
|
|
import PropTypes from 'prop-types'; |
|
4
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
|
5
|
|
|
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'; |
|
6
|
|
|
import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount'; |
|
7
|
|
|
import { shortUrlType } from '../short-urls/reducers/shortUrlsList'; |
|
8
|
|
|
import { VisitType } from './types'; |
|
9
|
|
|
|
|
10
|
5 |
|
const propTypes = { |
|
11
|
|
|
visits: PropTypes.arrayOf(VisitType).isRequired, |
|
12
|
|
|
goBack: PropTypes.func.isRequired, |
|
13
|
|
|
title: PropTypes.node.isRequired, |
|
14
|
|
|
children: PropTypes.node, |
|
15
|
|
|
shortUrl: shortUrlType, |
|
16
|
|
|
}; |
|
17
|
|
|
|
|
18
|
5 |
|
const VisitsHeader = ({ visits, goBack, shortUrl, children, title }) => ( |
|
19
|
2 |
|
<header> |
|
20
|
|
|
<Card className="bg-light" body> |
|
21
|
|
|
<h2 className="d-flex justify-content-between align-items-center mb-0"> |
|
22
|
|
|
<Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}> |
|
23
|
|
|
<FontAwesomeIcon icon={faArrowLeft} /> |
|
24
|
|
|
</Button> |
|
25
|
|
|
<span className="text-center d-none d-sm-block"> |
|
26
|
|
|
<small>{title}</small> |
|
27
|
|
|
</span> |
|
28
|
|
|
<span className="badge badge-main ml-3"> |
|
29
|
|
|
Visits:{' '} |
|
30
|
|
|
<ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} /> |
|
31
|
|
|
</span> |
|
32
|
|
|
</h2> |
|
33
|
|
|
<h3 className="text-center d-block d-sm-none mb-0 mt-3"> |
|
34
|
|
|
<small>{title}</small> |
|
35
|
|
|
</h3> |
|
36
|
|
|
|
|
37
|
|
|
{children && <div className="mt-md-2">{children}</div>} |
|
38
|
|
|
</Card> |
|
39
|
|
|
</header> |
|
40
|
|
|
); |
|
41
|
|
|
|
|
42
|
5 |
|
VisitsHeader.propTypes = propTypes; |
|
43
|
|
|
|
|
44
|
|
|
export default VisitsHeader; |
|
45
|
|
|
|
shlinkio /
shlink-web-client
